<template>
	<!-- 书架书本组件 -->
	<view class="shulist">
		<view class="shujia" v-for="(item,index) in list" :key="index" @click="toXiangqing">
			<view class="list-img">
				<image :src="item.src" mode=""></image>
			</view>
			<view class="list-active" v-show="isShow"  @click.stop="actShow(index)">
				<view class="active-img">
					<image src="" mode="" v-show="!item.show"></image>
					<image :src="img" mode="" v-show="item.show"></image>
				</view>
			</view>
			<view class="list-title">
				{{item.title}}
			</view>
		</view>
		<view v-show="isText" class="shujia item"  @click="pushshu">
			<image class="item-img" src="../../static/index/001.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"shulist",
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			},
			isShow:{  //控制卡片选中样式显示隐藏
				type:Boolean,
				default(){
					return false
				}
			},
			isText:{ //是否显示添加书本
				type:Boolean,
				default(){
					return false
				}
			}
		},
		// watch:{
		// 	list:function(canshu){
		// 		console.log(canshu)
		// 		this.shulist = null
		// 		this.shulist = canshu
		// 	}
		// },
		// created(){
		// 	this.shulist = this.list
		// },
		computed:{
			value:{
				//通过计算属性，监听 value 的变化
				get() { // 显示修改后的数据
				    return this.list.every((item)=>item.show)
				},
				// 修改数据  传参  
				set(v) {
				   this.list.forEach((item)=>item.show=v)
				},
			}
		},
		data() {
			return {
				img:"../../static/index/dui.png",
				// shulist:this.list,
			};
		},
		methods:{
			toXiangqing(){ //跳转详情页
				// console.log(111)
				uni.navigateTo({
				    url: '../../pages/xiangqing/xiangqing'
				});
				
			},
			pushshu(){ //添加书
				//console.log(111)
				uni.switchTab({
				    url: '/pages/jingxuan/jingxuan'
				});
			},
			actShow(index){ //点击选中状态切换
				// console.log(111)
				this.list[index].show =! this.list[index].show;
				//向父组件发送事件然后传值，来管理 全部 复选框的状态
				this.$emit('active',this.value)
			},
			del(){ //删除功能
				// var newData =[];
				// this.shulist.forEach((val,index) => {
				// 	if ( !val.show) {
				// 		newData.push(val)
				// 		//this.shulist.remove(index)
				// 	}
				// })
				// this.shulist = newData;
				// try {
				//     uni.setStorageSync('storage_key',newData);
				// } catch (e) {
				//     // error
				// }
				this.$emit("del")
				//判断数组的长度，长度为 0 ，则禁用 复选框
				if(this.list.length == 0){
					//通过自定义事件，向父组件传方法的时候也传一个值去禁用 复选框
					this.$emit('flagle',true);
					uni.showToast({
					    title: '已全部删除！',
					    duration: 2000,
						icon:"none"
					});
				}else{
					uni.showToast({
					    title: '删除成功！',
					    duration: 2000
					});
				}
			},
			quanXuan(){  // 全选状态
				//console.log(1211)
				//遍历数组，然后给每条数组的全选样式改为 true
				this.list.forEach((item)=>{
					item.show = true
				})
			},
			unquanXuan(){ //不全选状态
			//遍历数组，然后给每条数组的全选样式改为 false
				this.list.forEach((item)=>{
					item.show = false
				})
			},
			// upda(){ //更新数据
			// 	console.log(111)
			// 	this.shulist = this.list
			// }
		}
	}
</script>

<style scoped lang="scss">
.shulist{
	margin-top: 42rpx;
	display: flex;
	flex-wrap: wrap;
		.shujia{
			margin-left: 20rpx;
			margin-bottom: 16rpx;
			position: relative;
			.list-img{
				width: 206rpx;
				height: 290rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.list-title{
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				width:206rpx; 
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis; 
			}
			.list-active{
				width: 206rpx;
				height: 290rpx;
				background: rgba(0, 0, 0, 0.73);
				position: absolute;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.active-img{
					image{
						width: 54rpx;
						height: 54rpx;
						background: #FFFFFF;
						border: 1rpx solid #FF5352;
						border-radius: 50%;
					}
				}
			}
		}
		.item{
				width: 206rpx;
				height: 290rpx;
				background-color: #FFE3DD;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 2rpx;
				}
			}
}
</style>
